<template>
	<view class="m-uploads flex-start">
		<!--
			上传组件参数说明
			@uploadNum：上传最大数量
			@modelNmae：KEY
			@delete：图片删除回调
			@confirm：上传完成回调
		-->
		<view class="m-uploads_previewimg" v-if="onUploads.length > 0">
			<!-- 预览区域 -->
			<view class="flex-start">
				<view class="m-uploads__image" v-for="(item, index) in onUploads" :key="index">
					<m-icon name="delete-bin-5-line" color="#fff" size="25rpx" class="m-uploads__delece_icon" @click="deleceImg(index)"></m-icon>
					<image :src="item" mode="widthFix" style="width: 100%;" @click="previewImg(index)"></image>
				</view>
			</view>
		</view>
		<view class="m-uploads_uploads" v-if="onUploads.length < uploadNum">
			
			<!-- 加载区域 -->
			<view class="m-uploads__loading" v-if="loading">
				<view class="loading">
					<i-icon name="loader-5-line" size="60rpx" color="#888" @click="uploadImg()"></i-icon>
				</view>
			</view>
			
			<!-- 上传区域 -->
			<view @click="uploadImg()" v-if="!loading">
				<slot>
					<view class="m-uploads__camera">
						<i-icon name="image-add-line" size="60rpx" color="#888" @click="uploadImg()"></i-icon>
						<view class="m-uploads___title">
							<text>{{ uploadTxt ? uploadTxt : $t('m_steps.select-imgs')}}</text>
						</view>
					</view>
				</slot>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-uploads",
		props: ['uploadNum','modelNmae','imgList','prevImgs','uploadTxt'],
		data() {
			return {
				albumWidth: 0,
				onUploads:[],// 已经上传完成的图片，用作预览
				loading:false,
			};
		},
		mounted(){
			// 预加载图片
			const _this = this;
			// console.log(_this.prevImgs)
			if(_this.prevImgs && _this.prevImgs.length > 0){
				for (const key in _this.prevImgs) {
					if(_this.prevImgs[key]){
						_this.onUploads.push(_this.prevImgs[key]);
					}
				}
			}
		},
		methods:{
			init(){
				if(this.prevImgs && this.prevImgs.length > 0){
					for (const key in prevImgs) {
						this.onUploads.push(prevImgs[key]);
					}
				}
			},
			async uploadImg(){
				// this.loading = true;
				let {
					uploadNum
				} = this
				let res = await this.$util.chooseImage('file/uploadImage',uploadNum)
				if(res.length > 0){
					for (const key in res) {
						this.onUploads.push(res[key])
					}
				}
				this.$util.showToast('上传成功')
				this.confirm()
			},
			
			confirm(){
				this.$emit('confirm',{
					modelName:this.modelNmae,
					urls:this.onUploads
				})
			},
			
			previewImg(index){
				uni.previewImage({
					current:index,
					urls: this.onUploads,
					longPressActions: {
					itemList: [this.$t('m_uploads.save-img')],
					success: function(data) {
						this.$util.saveImageToPhoto(this.onUploads(data.index));
						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
				});
			},
			
			deleceImg(index){
				console.log(index);
				this.onUploads.splice(index,1);
				this.$emit('delete',{
					modelName:this.modelNmae,
					urls:this.onUploads
				});
				console.log(this.onUploads);
			}
		}
	}
</script>

<style lang="scss">
	.m-uploads{
		&_previewimg{
			// margin-bottom: 20rpx;
		}
		&__image{
			width: 170rpx;
			max-height: 170rpx;
			overflow: hidden;
			margin-right:20rpx;
			// margin-bottom:20rpx;
			position: relative;
			// border-radius: 5px;
		}
		&__image:nth-child(3n){
			margin-right: 0;
		}
		&__delece_icon{
			position: absolute;
			top: 0;
			right: 0;
			z-index: 2;
			padding: 5rpx;
			background-color: #55555530;
		}
		&_uploads{
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// border-radius: 5px;
			// width: 170rpx;
			// height: 170rpx;
			// background-color: rgba(255, 212, 38, .2);
			// color: #888;
			// background-color: #f4f5f7;
			// text-align: center;
			// font-size: $contentSize;
		}
		&__camera{
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			width: 170rpx;
			height: 170rpx;
			background-color: #f4f5f7;
			color: #888;
			background-color: #f4f5f7;
			text-align: center;
			font-size: $contentSize;
		}
	}
	.loading{
		animation:rotating 1s infinite;
	}
	@keyframes rotating{
		from{
			transform:rotate(0)
		}
		to{
			transform:rotate(360deg)
		}
	}

</style>